<template>
    <div class="title">
        <p>
            <el-popover
                placement="top-start"
                :width="380"
                :show-arrow="false"
                trigger="hover"
                @before-enter="getAvaInfos(props.mid)"
            >
                <template #reference>
                    <img :src="props.member.avatar" />
                </template>
                <template #default v-if="upCardInfo">
                    <up-info-box 
                        :card="upCardInfo.card"
                        :space="upCardInfo.space"
                        :like_num="upCardInfo.like_num"
                        :following="upCardInfo.following"
                    >
                    </up-info-box>
                </template>
            </el-popover>
            
        </p>
    </div>
    <div class="dateInfo">
        <p>
            <el-popover
                placement="top-start"
                :width="380"
                :show-arrow="false"
                trigger="hover"
                @before-enter="getAvaInfos(props.mid)"
            >
                <template #reference>
                    <span :style="{ 'color':props.member.vip.nickname_color }">{{ props.member.uname }}</span>
                </template>
                <template #default v-if="upCardInfo">
                    <up-info-box 
                        :card="upCardInfo.card"
                        :space="upCardInfo.space"
                        :like_num="upCardInfo.like_num"
                        :following="upCardInfo.following"
                    >
                    </up-info-box>
                </template>
            </el-popover>
            
            <span>LV{{ props.member.level_info.current_level }}</span>
            
            <el-popover
                placement="top-start"
                :width="380"
                :show-arrow="false"
                :visible ="isShowCard"
                popper-style="transition-delay: 0.2s"
            >
                <template #reference>
                    <span v-html="initMessage" @mousemove="getAtInfo" @mouseout="leaveAtInfo"></span>
                </template>
                <template #default v-if="upCardInfo">
                    <up-info-box 
                        :card="upCardInfo.card"
                        :space="upCardInfo.space"
                        :like_num="upCardInfo.like_num"
                        :following="upCardInfo.following"
                        @mouseenter="isShowCard = true"
                        @mouseleave="isShowCard = false"
                    >
                    </up-info-box>
                </template>
            </el-popover>
        </p>
        <p>
            <span>{{ NowBetwYMDDate(props.ctime) }}</span>
            <span><img src="@/assets/videoIcon/dianzanSmall.png"/>{{ remove0(props.like) }}</span>
            <span><img src="@/assets/videoIcon/noDZ.png"/></span>
            <el-button text @click="reply">回复</el-button>
        </p>
    </div>
</template>

<script lang="ts" setup>
import { NowBetwYMDDate } from '@/utils/format'
import upInfoBox from '../view/upInfoBox.vue'
import { computed,ref, Ref } from 'vue'
import type { Comment,upCardInfo } from './typeInterface'
import { getAvaInfo } from '@/http/httpFunction'
import { handleMessage } from '../hooks/useInitStringEmote'

interface Props extends Comment{
    
}
const props = defineProps<Props>()

let upCardInfo:Ref<upCardInfo | undefined> = ref() 
function reply(){

}
let isShowCard = ref<boolean>(false)
//鼠标移入A标签触发
function getAtInfo(e:any){
    if (isShowCard.value) {
        return
    }
    if (e.target.nodeName === "A") {
        isShowCard.value = true
        return getAvaInfos(e.target.dataset.id)
    }
}
//鼠标移出A标签
function leaveAtInfo(e:any) {
    if (e.target.nodeName === "A") {
        isShowCard.value = false
    }
}
//得到头像/@展示的up主信息
function getAvaInfos(mid:number){
    return getAvaInfo(mid).then(res => { upCardInfo.value = res })
}
const remove0 = computed(() => (val:number) => {
    if (!val) return ""
    else return val
})
//处理字符串 为其中加入表情或img
const initMessage = computed(() => {
    return handleMessage(props.content)
})
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.title{
    display: flex;
    margin-right: 10px;
    & p:nth-child(1) img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
}
.dateInfo{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    color: #9499A0;
    font-size: 13px;

    & p:nth-child(1){
        text-align: left;
    }
    & p:nth-child(1) span:nth-child(1){
        color:#61666D;
        font-size: 13px;
        white-space: nowrap;
        cursor: pointer;
    }
    & p:nth-child(1) span:nth-child(2){
        display:inline-block;
        scale: 0.75;
        height: 18px;
        border-radius: 4px;
        margin-left: 10px;
        padding: 0 2px;
        color:white;
        font-size: 12px;
        background: #e17055;
        -webkit-text-stroke: 1px white;          
    }
    & p:nth-child(1) span:nth-child(3){
        color: #18191C;
        font-size: 15px;
        text-align: left;
        margin-left: 15px;
    }
    & p:nth-child(2){
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;
        color: #9499A0;
        font-size: 13px;
    }
    & p:nth-child(2) span{
        @include flexRowCenter;
    }
    & p:nth-child(2) span:nth-child(2) img{
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    & p:nth-child(2) span:nth-child(3) img{
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }
}
</style>